<template>
  <div>
    <Row>
      <Col span="16">
        <Row>
          <Col span="12">
            <span>name:{{data && data.Name}}</span>
            <div>资料:<span v-html="data && data.Info"/></div>
            <div>类别:{{data.Type}}</div>
          </Col>
          <Col span="12">
            <div>头像:<img width="60" height="60" :src="bizInfo.Icon"/></div>
            <div>name:{{bizInfo.Name}}</div>
            <div>资料:{{bizInfo.Desc}}</div>
            <div>文章记录:{{`${bizInfo.DateStart} -> ${bizInfo.DateEnd}`}}</div>
          </Col>
        </Row>
        <CellGroup v-if="tasks.length>0">
          <Cell title="任务" disabled/>
          <Cell v-for="(task,idx) in tasks" :key="idx" :title="task.GongzhonghaoName" :label="getStatusName(task.Status)">
            <div slot="extra">
              <a :style="{textDecoration: 'underline'}" @click="revertTask(task.Id)">状态重置</a>
              <a :style="{textDecoration: 'underline'}">冻结</a>
              <a :style="{textDecoration: 'underline'}">删除</a>
            </div>
          </Cell>
        </CellGroup>
      </Col>
      <Col span="8">
      <Scroll :on-reach-bottom="getArticalListByBiz">
        <CellGroup @on-click="selectArtical">
          <Cell  v-for="(item, index) in articals" :name="item"  :title="item.Title" :label="item.Desc" :key="index">
            <img width="40" height="40" slot="icon" :src="`${'/v1/weixin/fileproxy?file='+item.Info}`" />
          </Cell>
        </CellGroup>
      </Scroll>
      </Col>
    </Row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  props: {
    data: {

    }
  },
  computed: {
    ...mapState({
      bizInfo: state => state.weixin.pubAccountdetail.detail,
      tasks: state => state.weixin.pubAccountdetail.tasks,
      articals: state => state.weixin.pubAccountdetail.articals
    })
  },
  data: () => {
    return {
      pageIndex: 0,
      pageSize: 10
    }
  },
  mounted () {
    if (this.data.Biz && this.data.BizId !== 0) {
      this.getBiz({id: this.data.BizId, name: this.data.Name})
    }
  },
  methods: {
    ...mapActions([
      'revertTask',
      'getBiz',
      'getTaskByName',
      'getArticalListByBiz',
      'selectArtical'
    ]),
    handleReachBottom: () => {
      // 加载更多
    },
    getStatusName (status) {
      switch (status) {
        case 0:
          return '未开始'
        case 1:
          return '进行中'
        case 2:
          return '完成'
        case 3:
          return '失败'
        default:
          return '未知'
      }
    }
  }
}
</script>

<style scoped>
</style>
